<template>
    <el-dialog title="详情" :close-on-click-modal="false" append-to-body :visible.sync="visible"
        class="JNPF-dialog JNPF-dialog_center" lock-scroll width="800px">
        <el-row :gutter="15" class="">
            <el-form ref="formRef" :model="dataForm" size="small" label-width="100px" label-position="right">
                <template v-if="!loading">
                    <!-- <el-col :span="4">
                        <el-row :gutter="15">
                            <el-col :span="24">
                                <jnpf-form-tip-item label-width="0">
                                    <JnpfText
                                        :textStyle='{ "color": "#000000", "font-weight": "normal", "text-decoration": "none", "font-size": 12, "line-height": 32, "font-style": "normal", "text-align": "left" }'
                                        :closable="false">
                                    </JnpfText>
                                </jnpf-form-tip-item>
                            </el-col>
                        </el-row>
                    </el-col> -->
                    <el-col :span="24">
                        <el-row :gutter="15">
                            <el-col :span="24">
                                <jnpf-form-tip-item label-width="0">
                                    <JnpfText
                                        :textStyle='{ "color": "#000000", "font-weight": "bold", "text-decoration": "none", "font-size": 20, "line-height": 22, "font-style": "normal", "text-align": "center" }'
                                        :closable="false" content="Saas化服务">
                                    </JnpfText>
                                </jnpf-form-tip-item>
                            </el-col>
                            <!-- <el-col :span="24">
                                <jnpf-form-tip-item label="软件名称" prop="name">
                                    <p>{{ dataForm.name }}</p>
                                </jnpf-form-tip-item>
                            </el-col> -->
                            <el-col :span="24">
                                <jnpf-form-tip-item label="软件名称" prop="name">
                                    <JnpfInput v-model="dataForm.name" @change="changeData('name', -1)"
                                        placeholder="请输入" clearable :style='{ "width": "100%" }' readonly>
                                    </JnpfInput>
                                </jnpf-form-tip-item>
                            </el-col>
                            <el-col :span="24">
                                <jnpf-form-tip-item label="软件类型" prop="softtype">
                                    <JnpfInput v-model="dataForm.softtype" @change="changeData('name', -1)"
                                        placeholder="请输入" clearable :style='{ "width": "100%" }' readonly>
                                    </JnpfInput>
                                    <!-- <p>{{ dataForm.softtype }} </p> -->
                                </jnpf-form-tip-item>
                            </el-col>
                            <el-col :span="24">
                                <jnpf-form-tip-item label="产品类别" prop="producttype">
                                    <JnpfInput v-model="dataForm.producttype" @change="changeData('name', -1)"
                                        placeholder="请输入" clearable :style='{ "width": "100%" }' readonly>
                                    </JnpfInput>
                                    <!-- <p>{{ dataForm.producttype }} </p> -->
                                </jnpf-form-tip-item>
                            </el-col>
                            <el-col :span="24">
                                <jnpf-form-tip-item label="操作系统" prop="os">
                                    <JnpfInput v-model="dataForm.os" @change="changeData('name', -1)" placeholder="请输入"
                                        clearable :style='{ "width": "100%" }' readonly>
                                    </JnpfInput>
                                    <!-- <p>{{ dataForm.os }} </p> -->
                                </jnpf-form-tip-item>
                            </el-col>
                            <el-col :span="24">
                                <jnpf-form-tip-item label="产品简介" prop="description">
                                    <JnpfTextarea v-model="dataForm.description" @change="changeData('description', -1)"
                                        placeholder="请输入" :style='{ "width": "100%" }' true type="textarea"
                                        :autosize='{ "minRows": 4, "maxRows": 4 }' readonly>
                                    </JnpfTextarea>
                                </jnpf-form-tip-item>
                            </el-col>
                            <el-col :span="24">
                                <jnpf-form-tip-item label="图片" prop="pic">
                                    <JnpfUploadImg v-model="dataForm.pic" disabled detailed :fileSize="10" sizeUnit="MB"
                                        :limit="1" pathType="defaultPath" :isAccount="0">
                                    </JnpfUploadImg>
                                </jnpf-form-tip-item>
                            </el-col>
                            <el-col :span="24">
                                <jnpf-form-tip-item label="功能特点" prop="funcspec">
                                    <JnpfEditor v-model="dataForm.funcspec" @change="changeData('funcspec', -1)"
                                        placeholder="请输入" :style='{ "width": "100%" }' disabled>
                                    </JnpfEditor>
                                </jnpf-form-tip-item>
                            </el-col>
                            <el-col :span="24">
                                <jnpf-form-tip-item label="案例介绍" prop="caseinfo">
                                    <JnpfEditor v-model="dataForm.caseinfo" @change="changeData('caseinfo', -1)"
                                        placeholder="请输入" :style='{ "width": "100%" }' disabled>
                                    </JnpfEditor>
                                </jnpf-form-tip-item>
                            </el-col>
                            <el-col :span="24">
                                <jnpf-form-tip-item label="下载方式" prop="downloadmethod">
                                    <p>{{ dataForm.downloadmethod }} </p>
                                </jnpf-form-tip-item>
                            </el-col>
                            <el-col :span="24" v-if="dataForm.downloadmethod == '安装包下载'">
                                <jnpf-form-tip-item label="安装包上传" prop="fpackage">
                                    <JnpfUploadFile v-model="dataForm.fpackage" disabled detailed :fileSize="10"
                                        sizeUnit="MB" :limit="9" pathType="defaultPath" :isAccount="0"
                                        buttonText="点击上传">
                                    </JnpfUploadFile>
                                </jnpf-form-tip-item>
                            </el-col>
                            <el-col :span="24" v-if="dataForm.downloadmethod == '超链接'">
                                <jnpf-form-tip-item label="下载地址" prop="url">
                                    <a>{{ dataForm.url }}</a>
                                </jnpf-form-tip-item>
                            </el-col>
                            <el-col :span="24">
                                <jnpf-form-tip-item label="联系电话" prop="phone">
                                    <p>{{ dataForm.phone }}</p>
                                </jnpf-form-tip-item>
                            </el-col>
                            <el-col :span="24">
                                <jnpf-form-tip-item label="联系邮箱" prop="email">
                                    <p>{{ dataForm.email }}</p>
                                </jnpf-form-tip-item>
                            </el-col>

                        </el-row>
                    </el-col>
                    <!-- <el-col :span="4">
                        <el-row :gutter="15">
                            <el-col :span="24">
                                <jnpf-form-tip-item label-width="0">
                                    <JnpfText
                                        :textStyle='{ "color": "#000000", "font-weight": "normal", "text-decoration": "none", "font-size": 12, "line-height": 32, "font-style": "normal", "text-align": "left" }'
                                        :closable="false">
                                    </JnpfText>
                                </jnpf-form-tip-item>
                            </el-col>
                        </el-row>
                    </el-col> -->
                </template>
            </el-form>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false"> 取 消</el-button>
        </span>
        <Detail v-if="detailVisible" ref="Detail" @close="detailVisible = false" />
    </el-dialog>
</template>
<script>
import request from '@/utils/request'

import { getConfigData } from '@/api/onlineDev/visualDev'
import jnpf from '@/utils/jnpf'
import Detail from '@/views/basic/dynamicModel/list/detail'
import { thousandsFormat } from "@/components/Generator/utils/index"
export default {
    components: { Detail },
    props: [],
    data() {
        return {
            visible: false,
            detailVisible: false,
            loading: false,

            dataForm: {
                id: '',
                name: '',
                softtype: "",
                producttype: [],
                os: [],
                description: '',
                pic: [],
                funcspec: '',
                caseinfo: '',
                downloadmethod: '',
                fpackage: [],
                url: '',
                phone: '',
                email: '',
                status: "",
            },
            softtypeOptions: [{ "fullName": "大众免费使用", "id": "1" }, { "fullName": "购买使用", "id": "2" }],
            softtypeProps: { "label": "fullName", "value": "id" },
            producttypeOptions: [{ "children": [{ "fullName": "CAD", "id": "1-1" }, { "fullName": "CAE", "id": "1-2" }, { "fullName": "CAPP", "id": "1-3" }, { "fullName": "CAM", "id": "1-4" }, { "fullName": "数字孪生", "id": "1-5" }], "fullName": "研发制造", "id": "1" }, { "children": [{ "fullName": "PLM", "id": "2-1" }, { "fullName": "PDM", "id": "2-2" }, { "fullName": "DNC", "id": "2-3" }, { "fullName": "MDC", "id": "2-4" }, { "fullName": "QMC", "id": "2-5" }, { "fullName": "LIMS", "id": "2-6" }, { "fullName": "MES", "id": "2-7" }, { "fullName": "APS", "id": "2-8" }], "fullName": "生产制造", "id": "2" }, { "children": [{ "fullName": "ERP", "id": "3-1" }, { "fullName": "CRM", "id": "3-2" }, { "fullName": "SRM", "id": "3-3" }, { "fullName": "SCM", "id": "3-4" }, { "fullName": "OA", "id": "3-5" }, { "fullName": "BI", "id": "3-6" }, { "fullName": "FMIS", "id": "3-7" }, { "fullName": "BOM", "id": "3-8" }, { "fullName": "WMS", "id": "3-9" }, { "fullName": "MRP", "id": "3-10" }], "fullName": "经营管理", "id": "3" }, { "children": [{ "fullName": "监控系统", "id": "4-1" }, { "fullName": "日志管理系统", "id": "4-2" }, { "fullName": "故障管理系统", "id": "4-3" }, { "fullName": "安全管理系统", "id": "4-4" }], "fullName": "运维服务", "id": "4" }, { "fullName": "其他", "id": "5" }],
            producttypeProps: { "label": "fullName", "value": "id", "children": "children" },
            osOptions: [{ "fullName": "Windows", "id": "Windows" }, { "fullName": "macOS", "id": "macOS" }, { "fullName": "Linux", "id": "Linux" }, { "fullName": "Android", "id": "Android" }, { "fullName": "iOS", "id": "iOS" }, { "fullName": "RTOS", "id": "RTOS" }, { "fullName": "其他", "id": "other" }],
            osProps: { "label": "fullName", "value": "id" },
            downloadmethodOptions: [{ "fullName": "超链接", "id": "Link" }, { "fullName": "安装包下载", "id": "Installer" }],
            downloadmethodProps: { "label": "fullName", "value": "id" },
            statusOptions: [{ "fullName": "草稿", "id": "0" }, { "fullName": "处理", "id": "1" }, { "fullName": "通过", "id": "2" }, { "fullName": "驳回", "id": "3" }, { "fullName": "撤销", "id": "4" }, { "fullName": "终止", "id": "5" }, { "fullName": "不通过", "id": "6" }],
            statusProps: { "label": "fullName", "value": "id" },
            interfaceRes: {
                name: [],
                softtype: [],
                producttype: [],
                os: [],
                description: [],
                pic: [],
                funcspec: [],
                caseinfo: [],
                downloadmethod: [],
                fpackage: [],
                url: [],
                phone: [],
                email: [],
                status: [],
            },
        }
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() { },
    methods: {
        toDetail(defaultValue, modelId) {
            if (!defaultValue) return
            getConfigData(modelId).then(res => {
                if (!res.data || !res.data.formData) return
                let formData = JSON.parse(res.data.formData)
                formData.popupType = 'general'
                this.detailVisible = true
                this.$nextTick(() => {
                    this.$refs.Detail.init(formData, modelId, defaultValue)
                })
            })
        },
        dataInfo(dataAll) {
            let _dataAll = dataAll
            this.dataForm = _dataAll
        },

        init(id) {
            this.dataForm.id = id || 0;
            this.visible = true;
            this.$nextTick(() => {
                if (this.dataForm.id) {
                    this.loading = true
                    request({
                        url: '/api/example/Fz_saas_product/detail/' + this.dataForm.id,
                        method: 'get'
                    }).then(res => {
                        this.dataInfo(res.data)
                        this.loading = false
                    })
                }

            })
        },
    },
}

</script>